<template>
  <div id="map-chart">
    <dv-border-box-8>
      <div style="width: 735px; height: 100%; border: 1px solid royalblue">
        <div id="lranContainer" style="width: 100%; height: 100%"></div>
      </div>
    </dv-border-box-8>
  </div>
</template>

<script>
import * as echarts from "echarts";
import iranData from "./iran.json";
export default {
  name: "MapChart",
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.createChart();
    });
  },
  methods: {
    createChart() {
      let myChart = echarts.init(document.getElementById("lranContainer"));
      echarts.registerMap("Iraq", iranData);
      // let option = {
      //   title: {
      //     text: "",
      //     sublink: "http://127.0.0.1/Africa.html",
      //     left: "center",
      //   },
      //   tooltip: {
      //     trigger: "item",
      //     // 浮层显示的延迟
      //     showDelay: 0,
      //     // 提示框浮层的移动动画过渡时间
      //     transitionDuration: 0.2,
      //   },
      //   series: [
      //     {
      //       name: "通报数量",
      //       type: "map",
      //       // 开启鼠标缩放和平移漫游
      //       roam: true,
      //       map: "Iraq",
      //       // 显示标签
      //       emphasis: {
      //         label: { show: true },
      //       },
      //       // 文本位置修正
      //       textFixed: { Alaska: [20, -20] },
      //       //中文名称
      //       //nameMap,
      //       data: [],
      //     },
      //   ],
      // };
      let list = [
        {
          name: "Al-Anbar",
          value: 129,
        },
        {
          name: "Al-Basrah",
          value: 61,
        },
        {
          name: "Al-Muthannia",
          value: 4,
        },
        {
          name: "Al-Qadisiyah",
          value: 389,
        },
        {
          name: "An-Najaf",
          value: 598,
        },
        {
          name: "Arbil",
          value: 240,
        },
        {
          name: "As-Sulaymaniyah",
          value: 1000,
        },
        {
          name: "At-Ta'mim",
          value: 941,
        },
        {
          name: "Babil",
          value: 871,
        },
        {
          name: "Baghdad",
          value: 777,
        },
        {
          name: "Dhi-Qar",
          value: 0,
        },
        {
          name: "Dihok",
          value: 409,
        },
        {
          name: "Diyala",
          value: 168,
        },
        {
          name: "Karbala",
          value: 298,
        },
        {
          name: "Maysan",
          value: 810,
        },
        {
          name: "Ninawa",
          value: 812,
        },
        {
          name: "Sala ad-Din",
          value: 721,
        },
        {
          name: "Wasit",
          value: 631,
        },
      ];
      let option = {
        title: {
          text: "",
          subtext: "",
          left: "left",
        },
        tooltip: {
          triggerOn: "click",
          // triggerOn: "none",
          // alwaysShowContent: true,
          // position: function(pt) {
          //   return [pt[0], 130];
          // }
        },

        visualMap: {
          min: 0,
          max: 1000,
          left: "right",
          bottom: 0,
          showLabel: !0,
          text: ["High", "Low"],
          textStyle: {
            color: "#ffffff",
          },
          inactiveColor: "#898989",
          pieces: [],
          show: true,
          inRange: {
            color: [
              '#313695',
              '#4575b4',
              '#74add1',
              '#abd9e9',
              '#e0f3f8',
              '#ffffbf',
              '#fee090',
              '#fdae61',
              '#f46d43',
              '#d73027',
              '#a50026'
            ]
          }
        },
        geo: {
          map: "Iraq",
          roam: true,
          scaleLimit: {
            min: 1,
            max: 2,
          },
          zoom: 1.23,
          top: 40,
          label: {
            normal: {
              show: !0,
              fontSize: "14",
              color: "rgba(0,0,0,0.7)",
            },
          },
          itemStyle: {
            normal: {
              //shadowBlur: 50,
              //shadowColor: 'rgba(0, 0, 0, 0.2)',
              borderColor: "rgba(0, 0, 0, 0.2)",
            },
            emphasis: {
              areaColor: "#f2d5ad",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              borderWidth: 0,
            },
          },
        },
        series: [
          {
            name: "使用数量",
            type: "map",
            geoIndex: 0,
            data: list,
          },
        ],
      };
      myChart.setOption(option);

      // let chart = echarts.getInstanceByDom(document.getElementById('lranContainer'));
      // if (chart == null) {
      //   // 如果不存在，就进行初始化
      //   chart = echarts.init(document.getElementById('lranContainer'));
      // }
      // chart.setOption(this.option);
      // window.addEventListener('resize', () => {
      //   chart.resize();
      // });
    },
  },
  // mounted() {
  //   const { createData } = this;

  //   createData();

  //   setInterval(createData, 30000);
  // },
};
</script>

<style lang="less"></style>
